{% extends 'baykeshop/user/menmber.html' %}

{% load bayketags %}

{% block menmber_title %}我的订单{% endblock %}

{% block menmber %}
<style>
 
    .b-tooltip:not(:last-child) {
        margin-right: .5em
    }
    .b-tooltip {
        margin-bottom: .5em
    }
    
</style>

<div class="tabs is-boxed is-fullwidth">
    <ul>
        <li class="{% if 'status' not in request.get_full_path or status == '' %} is-active {% endif %}" ><a href="{% url 'baykeshop:menmber-orders' %}">全部订单</a></li>
        <li class="{% if 'status=1' in request.get_full_path %} is-active {% endif %}"><a href="{% url 'baykeshop:menmber-orders' %}?pay_status=1">待支付</a></li>
        <li class="{% if 'status=2' in request.get_full_path %} is-active {% endif %}"><a href="{% url 'baykeshop:menmber-orders' %}?pay_status=2">待发货</a></li>
        <li class="{% if 'status=3' in request.get_full_path %} is-active {% endif %}"><a href="{% url 'baykeshop:menmber-orders' %}?pay_status=3">待收货</a></li>
        <li class="{% if 'status=4' in request.get_full_path %} is-active {% endif %}"><a href="{% url 'baykeshop:menmber-orders' %}?pay_status=4">待评价</a></li>
        <li class="{% if 'status=5' in request.get_full_path %} is-active {% endif %}"><a href="{% url 'baykeshop:menmber-orders' %}?pay_status=5">已完成</a></li>
    </ul>
</div>

<div id="confirmAction" class="mb-3">
    {% for order in results %}
    <div class="box has-background-light is-shadowless">
        <div class="is-flex is-justify-content-space-between">
            <div class=" has-text-grey-light1">订单日期：{{ order.add_date }}</div>
            <div class=" has-text-danger-dark">
                {{ order.pay_status|paystatus }}
            </div>
        </div>
        <div class="dropdown-divider"></div>
        {% for sku in order.baykeordersku_set %}
        <div class="is-flex is-justify-content-space-between">
            <div>
                <figure class=" image is-96x96">
                    <img src="{{ sku.skus.pic }}" alt="{{ sku.title }}" srcset="">
                </figure>
            </div>
            <div class="has-background-danger1 is-flex is-flex-direction-column is-justify-content-center is-flex-grow-1 pl-3 pr-3">
                <h1 class="has-text-weight-bold">{{ sku.title }}</h1>
                <div class="is-flex">
                    {% for op in sku.options %}
                    <span class="mr-3 has-text-grey-light">{{ op.spec__name }}:{{ op.name }}</span>
                    {% endfor %}
                </div>
            </div>
            <div class="has-background-danger1 is-flex is-justify-content-center is-align-items-center">
                <p class="has-text-danger-dark">¥ {{ sku.price }} x {{ sku.count }}</p>
            </div>
        </div>

        <div class="dropdown-divider"></div>
        {% endfor %}

        {% include 'baykeshop/order/action.html' %}

    </div>
    {% endfor %}
</div>

{% include 'baykeshop/comp/pages_api.html' %}

{% endblock %}


{% block vue %}{% endblock %}
    